<template>
  <!-- vue3页面 -->
   <a-row :gutter='10'>
                <a-col :xs='12' :md='6' :lg='6' v-for="item in 4" :key="item">
                <div class="perview">
                    <div class="card">
                    <div class="heading">UltraFlex</div>
                    <div class="details">Beste Design till date.<br>Flex it up as you wish,<br> but you can't break it.</div>
                    <div class="price">$299</div>
                    <button class="btn1">Buy</button>
                    <button class="btn2">Add to Cart</button>
                  </div>
                  <img class="glasses" src="@/assets/glasses/glasses.svg" />
                </div>
                </a-col>
    </a-row>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  name: 'App',
  setup () {
    return {}
  }
})
</script>

<style scoped>
.perview{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
}
.card {
  position: relative;
  top: 2em;
  width: 12.5em;
  height: 6.5em;
  /* height: 21.7em; */
  background: white;
  transition: .4s ease-in-out;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  overflow: hidden;
}

.heading {
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 1.1em;
  padding-top: 1em;
  /* padding-left: 1em; */
  transition: .4s ease-in-out;
}

.details {
  position: relative;
  color: black;
  font-size: 0.6em;
  padding-top: 1.5em;
  /* padding-left: 2em; */
  transition: .4s ease-in-out;
}

.price {
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 0.8em;
  padding-top: 1.5em;
  padding-left: 1.5em;
  top: 9.6em;
  left: 5em;
  transition: .4s ease-in-out;
}

.btn1 {
  position: relative;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  font-size: 0.6em;
  padding-left: 6.9em;
  padding-right: 6.9em;
  padding-top: 0.8em;
  padding-bottom: 0.85em;
  border-radius: 10px;
  /* left: 2.6em; */
  top: 14.8em;
  transition: .4s ease-in-out;
  font-weight: bold;
}

.btn1:hover {
  background-color: limegreen;
  cursor: pointer;
}

.btn2 {
  position: relative;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  font-size: 0.6em;
  padding-left: 5.1em;
  padding-right: 5.1em;
  padding-top: 0.8em;
  padding-bottom: 0.85em;
  border-radius: 10px;
  /* left: 2.6em; */
  top: 15.5em;
  transition: .4s ease-in-out;
  font-weight: bold;
}

.btn2:hover {
  background-color: limegreen;
  cursor: pointer;
}

.glasses {
  position: relative;
  top: -3.5em;
  left: 6.5em;
  width: 70px;
  height: 70px;
  transition: .4s ease-in-out;
}

.card:hover {
  width: 15.5em;
  height: 26.7em;
  transform: translateY(1.25em);
}

.card:hover + .glasses {
  transform: rotateX(360deg);
  height: 100px;
  width: 100px;
  left: 0em;
  top: -23.5em;
}

.card:hover .heading {
  transform: translateY(7em) translateX(0);
}

.card:hover .details {
  transform: translateY(13em) translateX(0);
}
</style>
